<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页标题</title>
	  <script src='scripts/jquery.js'></script>
	  <link rel="stylesheet" href="css/style.css">
	  <link rel="stylesheet" href="css/animate.css">
		<style>
		*{
			font-family: 'Comic Sans MS';
		}
		li { list-style: none;	}
		body { background: #88c2ff; }
		input { height: 30px;width: 150px;border-radius:10px;border:1px solid #999; outline: none;
		 padding: 5px 10px; }
		input:focus{ outline: none;	}
		.weaContainer {
			position: relative;
			overflow: hidden;
		}
		.weaContainer	.wea-single{
			position: relative;
			padding-top: 150px;
			width: 20%;
			text-align: center;
			float: left;
		}
		.weaPagination{
			text-align: center;
		}
		.weaPagination>ul {
			min-height: 50px;
			display: inline-block;
		}
		.weaPagination>ul>li {
			position: relative;
			float: left;
		}
		.weaPagination span {
			margin: 0 10px;
			width: 30px;
			height: 30px;
			border:2px solid #fff;
			border-radius:50%;
			transition:transform .35s,background .35s;
			display: inline-block;
			cursor: pointer;
		}
		.weaPagination li:not(.active) > span:hover{
			transform:scale(1.2);
		}
		.weaPagination .active > span{
			background: #fff;
		}
		.weaPagination .tips{
			position: absolute;
			top: calc( 100% + 10px );
			left: -70%;
			width: 120px;
			height: 50px;
			line-height: 50px;
			background: #fff;
			box-shadow:0 2px 5px rgba(0,0,.3);
			border-radius:10px;
			transform:translateX(-50%);			
			display: none;
		}
		.weaPagination .tips::before {
			content:'';
			position: absolute;
			bottom: 100%;
			left: 50%;
			width: 0px;
			border:10px solid transparent;
			border-bottom:10px solid #fff;
			transform:translateX(-50%);
		}
		</style>
	</head>
	<body>
		<form  id='form-wea'>
			<input type="text" placeholder='weather' name='wea' id='weather'autofocus>
		</form>
		 <div class="weaContainer"></div>
		 <div class="weaPagination">
		 <ul class='page'></ul>
	</body>
	<script>
		$(document).ready(function(){
			var currentPage=0,
					mthirty={top:-30,opacity:0},
				  thirty={top:30,opacity:0};
			$('#weather').keydown(function(e){//告诉我们所需要的按键信息
				if(e.keyCode==13){
					$('.weaContainer').html('Loading....');
					$('.weaPagination>ul').empty();
					weaSend().done(function(data){
						data=data.result.hourly;
						//console.log(data);
						init(data);
					});
				}
			});
				$('#form-wea').on('submit',function(){//on--绑定事件
					return false;//阻止原生表单提交
		});
		function weaSend(){
			return $.get('http://plrabbit.com/Test/details.php',{
				city:$('#weather').val(),
			})
		}
		function paging(data,index,ctrl){
			if(currentPage<index){
				animating(thirty,function(){
					tabs(data,index,ctrl,'next');
				});
				}else{
					animating(mthirty,function(){
						tabs(data,index,ctrl,'prev');
					});
				}
		}
		function animating(rule,fn){
			$('.weaContainer').animate(//下一页
				rule,400,fn).animate({
						top:0,
						opacity:1
				},400)
		}
		function init(data){//初始化
			$('.weaContainer').empty();
				for(var i=0;i<5;i++){
					var li=$('<li>'),
							span=$('<span>'),
							tips=$('<div>',{
								class:'tips animated bounceIn'
							});
					if(i==4){
						tips.html(data[i*5].time+'~'+data[i*5+3].time);
					}else{
						tips.html(data[i*5].time+'~'+data[i*5+4].time);
					}
				 span.click(function(){
					var index=$(this).parent().index();
					if(currentPage==index){
						return;	
					}
					paging(data,index,this);
				}).mouseenter(function(){
					$(this).next().delay(1000).show(0);
				}).mouseleave(function(){
					$(this).next().stop().hide();
				})
				li.append(span,tips);
				li.appendTo('.weaPagination>ul');
			}
			$('.page>li').first().addClass('active');
			//tabs(data,0,5);
			tabs(data,0,$('.page>li').first().children('span'));
			$('.weaContainer').css({
				top:0,
				opacity:1
			});
		}
		function tabs(data,index,ctrl,direction){
				$(ctrl).parent().addClass('active').siblings().removeAttr('class');
				currentPage=index;
				var step;
				if(index==4){
					step=4;
				}else{
					step=5;
				}
				$('.weaContainer').empty();
			 index=index*5;
			 for(var j=index;j<index+step;j++){					
				var a =	$('<div>',{
				class:'wea-single'
				});
				var icon=$('<div>',{
				class:'wea-icon'
				}),
				time=$('<h2>',{
				class:'time'
				}),
				temp=$('<h3>',{
					class:'temp'
				});
			if(data[j].weather.indexOf('晴')!=-1){
				icon.addClass('sunny');
			}if(data[j].weather.indexOf('云')!=-1||data[j].weather.indexOf('阴')!=-1){
				icon.addClass('cloudy');
			}if(data[j].weather.indexOf('雨')!=-1){
				icon.addClass('rainy');
			}
			temp.html(data[j].temp+'℃');
			time.html(data[j].time);
			a.append(icon,time,temp);
			a.appendTo('.weaContainer');//jq语法
			}if(direction=='next'){
				$(this).css(thirty);
			}else{
				$(this).css(mthirty);
			}
		}
});
	</script>
</html>